<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Dynamic Focus - Example of Bubbling technique</title>
<meta name='author' content='Caridy Patino (caridy at gmail.com)' />
<!-- Reset and Fonts -->
<link rel="stylesheet" type="text/css" href="../assets/example.css">
<!-- Dependency source files -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script>
<script type="text/javascript" src='../../../yui-cms/build/bubbling/bubbling.js'></script>
<script type="text/javascript">

  YAHOO.CMS.Bubble.addDefaultAction ('actionSetFocus',  
	function (layer, args) {
	  var el = YAHOO.CMS.Bubble.getAncestorByTagName( args[1].target, 'A' );
	  if (el && el.getAttribute('rel') && (el.getAttribute('rel').length > 0)) {
		// calculating the form field ID
		var field = YAHOO.util.Dom.get(el.getAttribute('rel'));
		if (field) {
		  field.focus();
		}
	  }
	}
  );

</script>
</head>
<body id="cms-body">

<div id="doc">

	<div class="path">
	  <a href="http://bubbling.comarq.com/" target="_top">Bubbling Library</a> &gt; <a href="http://bubbling.comarq.com/eng/examples" target="_top">Examples</a>
	</div>

	<h1>Examples of Using the Bubbling Technique: actionSetFocus</h1>
	
	<p>Benefit from the bubbling technique: We can define links to set the focus in each field in a form:</p>
	<p>
	  Please, enter the <a href="#" class="actionSetFocus" rel="username">username</a> and <a href="#" class="actionSetFocus" rel="password">password</a> to login...
	</p>
	<p>
  	  Username: <input name="username" id="username" size="20" maxlength="25" value="" type="text">
	</p>
	<p>
  	  Password: <input name="password" id="password" size="20" maxlength="25" value="" type="text">
	</p>
</div>



</body>
</html>